<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-button type="primary" @click="handleGetExcel">导出</el-button>
      <div class="item">
        <el-table
          ref="dataList"
          v-loading="listLoading"
          :data="menuList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          border
          row-key="id"
          style="margin-bottom: 20px;"
        >
          <el-table-column label="用户ID" prop="user_id"></el-table-column>
          <el-table-column label="用户编号" prop="user_code"></el-table-column>
          <el-table-column label="用户昵称" prop="nickname"></el-table-column>
          <el-table-column label="手机号" prop="mobile"></el-table-column>
          <el-table-column label="公会id" prop="sociaty_no"></el-table-column>
          <el-table-column label="性别" prop="sex">
          </el-table-column>
          <el-table-column label="会员等级" prop="wealth_level"></el-table-column>
          <el-table-column label="注册时间" prop="register_time"></el-table-column>
          <el-table-column label="报名时间" prop="time"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.page_size"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { getExcel, listData } from '@/api/meditateManage/meditateList'

export default {
  data() {
    return {
      listLoading: false,
      total: 0,
      listQuery: {
        page: 1,
        page_size: 10
      },
      menuList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] = !this.listQuery[key]
          ? undefined
          : this.listQuery[key]
      }
      listData(this.listQuery).then(response => {
        this.menuList = response.data.list
        this.total = response.data.meta.total
        this.listLoading = false
      })
    },
    handleGetExcel() {
      getExcel().then(res => {
        if (res.code === 200) {
          window.location.href = res.data.download_url
        }
      })
    }
  }
}
</script>
<style scoped>
[v-cloak] {
  display: none;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.demo-form-inline {
  float: right;
}

/deep/ .el-card__header {
  padding-bottom: 0;
}
</style>
